<template>
  <van-nav-bar title="我的收藏" left-arrow @click-left="goTop" />
  <!-- 遍历数据 -->
  <!-- <div v-for="item in list" :key="item.id"> -->
  <!-- 分页 -->
  <div v-for="item in currentPageData" :key="item.id">
    <!-- 大盒子 -->
    <div class="bigDiv">
      <!-- 左边盒子 -->
      <div class="leftDiv">
        <!-- 商品图片 -->
        <div class="myPicUrl">
          <img :src="item.picUrl" />
        </div>
      </div>
      <!-- 右边盒子 -->
      <div class="rightDiv">
        <!-- 商品名称 -->
        <div class="myName">
          {{ item.name }}
        </div>

        <!-- 商品内容 -->
        <div class="myBrief">
          {{ item.brief }}
        </div>

        <!-- 商品价钱 -->
        <div class="myPrice">￥{{ item.retailPrice }}</div>
      </div>
    </div>
  </div>
  <div class="btnPaging">
    <button @click="prevPage" :disabled="currentPage === 1">上一页</button>
    <!-- 页数 -->
    <span>第{{ currentPage }}页/总{{
      Math.ceil(this.list.length / this.pageSize)
    }}页</span>
    <button @click="nextPage" :disabled="currentPage === totalPages">
      下一页
    </button>
  </div>
  <!-- </div> -->
</template>

<script>
import { service } from "../api/config";
export default {
  name: "shoppingCollect",
  data() {
    return {
      type: "",
      page: "",
      limit: "",
      list: [],
      //第几页
      currentPage: 1,
      //一次展示多少条数据
      pageSize: 5,
    };
  },

  computed: {
    totalPages() {
      //整数取整
      return Math.ceil(this.list.length / this.pageSize);
    },
    //展示页面数据
    currentPageData() {
      //开始
      const startIndex = (this.currentPage - 1) * this.pageSize;
      //结束
      const endIndex = startIndex + this.pageSize;
      return this.list.slice(startIndex, endIndex);
    },
  },
  methods: {
    goTop() {
      this.$router.go(-1);
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
      }
    },
  },
  mounted() {
    // debugger
    service
      .get("/wx/collect/list", {
        params: {
          type: 0,
          page: "1",
          limit: "10",
        },
      })
      .then((res) => {
        console.log(res);
        if (res.data.errmsg == "成功") {
          res.data.data.list.forEach((item) => {
            this.list.push({
              id: item.id,
              brief: item.brief,
              name: item.name,
              retailPrice: item.retailPrice,
              picUrl: item.picUrl,
            });
          });
        }
      });
  },
};
</script>

<style scoped>
html {
  font-size: 0.2666vw;
}

.bigDiv {
  display: flex;
}

.leftDiv {
  flex: 25%;
  /*两个div同一列占比 */
}

.rightDiv {
  flex: 75%;
  /*两个div同一列占比 */
  padding-top: 25rem;
}

.myPicUrl>img {
  width: 100rem;
  height: 100rem;
  line-height: 50rem;
  margin-top: 20rem;
}

.myName {
  margin-top: 10rem;
  color: rgb(165, 165, 165);
  font-size: 20px;
}

.myBrief {
  margin-top: 10rem;
  font-size: 15px;
  color: rgb(185, 184, 185);
}

.myPrice {
  margin-top: 10rem;
  color: rgb(82, 82, 82);
}

.myDelete>img {
  width: 25rem;
  height: 25rem;
  margin-top: 40rem;
}

.btnPaging {
  width: 100%;
  text-align: center;
  font-size: 10rem;
  margin-top: 10rem;
}
</style>